<template>
	<view class="container">
		
	
		<view class="point_bg">
		 	<view class="pointtop">
					<image @click="$helper.back(1)" class="back-img" src="/static/image/back.png" mode=""></image>
					<view style="font-size: 36rpx;">我的积分</view>
					<view style="font-size: 28rpx;" @click="handlePointDetail">明细</view>
			</view>
			<view class="pinotNum">{{pointInfo.total_score}}</view>
			<view class="point-point">我的积分</view>
		</view>	
		<view class="money_list">
			 <view class="point-choose">选择积分</view>
				<view class="point-list">
						<view :class="[currentTab==index?'point-itemed':'']"  class="point-item" v-for="(item,index) in pointList" :key="index"  @click="switchTab(index)">
							 <view   class="item-fen" :class="[currentTab==index?'item-fened':'']" :data-tab="item.point"> <image src="/static/image/Index/index-jifen.png" mode=""></image> {{item.point}}</view>
							 <view class="item-jine">￥ {{item.money}}</view>
						</view>
				</view>
				<view class="recharge">
					<view class="rechtitle">自主充值</view>
					<view  class="rechargeMoney" >
						<view style="font-size: 56rpx;">￥</view>
						<input  class="uni-input" type="number" placeholder="请输入充值金额">
					</view>   
				</view>		
		</view>
		
		<view class="recharge-msg">
				<view class="msg-title">自主充值说明:</view>
				<view class="msg-item">	1、平台最低充值金额为1元；</view>
				<view class="msg-item"> 2、充值金额与积分比例为1:10，即充值1元到账10个积分；</view>
				<view class="msg-item">	3、充值成功后，将在24小时内到账。</view>
		</view>

		<view class="point-error">未成年人禁止充值，请家长加强监管，避免损失！</view>
		<view class="submitRecharge" @click="submitPay">确认充值</view>	
		
		<image src="/static/image/Index/point-kefu.png" mode="" @click="handleMore" class="kefu"></image>
		
	<!-- 底部打电话-->
			<uni-popup class="select_popup" ref="popupMore" :mask-click="true" type="bottom">
				<view class="morePopup">
					 <view class="selectBlack">139999999</view>		
					 <view class="selectDel">拨打电话</view>	
					 <view class="selectclose" @click="closeMore">取消</view>	
				</view>
			</uni-popup>
	</view>
</template>

<script>
	export default {
	
		data() {
			return {
				currentTab:-1,
			 pointList:[
					{point:'180',money:'18'},
					{point:'380',money:'38'},
					{point:'680',money:'68'},
					{point:'980',money:'98'},			 
					{point:'1280',money:'128'},			 
					{point:'1680',money:'168'},			 
					{point:'2680',money:'268'},			 
					{point:'3980',money:'398'},			 
					{point:'6980',money:'698'},			 
			 ],
			 pointInfo:'',
	
			}
		},
		onLoad() {
			this.getPoint()
		},
		methods: {
			//获取积分
			getPoint(){
				this.$http.getPointDetail({}).then(res => {
					if (res.code == '1') {
						this.pointInfo= res.data
						
					}		
				})
			},
		switchTab(index) {
			this.currentTab = index;
		},
		handleMore(){
			this.$refs.popupMore.open()
		},
		closeMore(){
			this.$refs.popupMore.close()
		},
		handlePointDetail(){
			this.$helper.to('/pages/tabBar/index/pointDetail')
		},
		submitPay(){
			 this.$helper.to('/pages/tabBar/index/pay')
		},
		}
	}
	
	
</script>

<style lang="scss" scoped>
	.container{
		width:100%;
		overflow-y: auto;
		background: #fff;
	}
	.select_popup {
		z-index: 9999;
		width: 100%;
		// 更多弹框
		.morePopup {
			background-color: #fff;
			height: 398rpx;
			border-radius:30rpx 30rpx 0 0 ;
		 .selectBlack{
				margin:0 30rpx;
				font-size: 30rpx;
				border-bottom:1px solid #f8f8f8;
				height:118rpx;
				text-align: center;
				line-height: 118rpx;
				color:#000;
			}
			.selectDel{
				font-size: 30rpx;
				height:118rpx;
				text-align: center;
				line-height: 118rpx;
				font-weight: bold;
				color:#000;
			}
			.selectclose{
				font-size: 30rpx;
				border-top:16px solid #f8f8f8;
				height:118rpx;
				text-align: center;
				line-height: 118rpx;
				color:#999;
			}
		}
		}
	.point_bg{
		background: url("/static/image/Index/point_bg.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height:482rpx;
		width:100%;
	}
	.pinotNum{
		margin-top:78rpx;
		margin-left:48rpx;
		font-size: 68rpx;
		color: #000000;
	}
	.point-point{
		margin-left:48rpx;
		font-size: 24rpx;
		color: #000000;
	}
	.pointtop{
		display: flex;
		align-items: center;
		justify-content:space-between;
		padding:50rpx 30rpx;
	}
	.back-img {
		width: 18rpx;
		height: 32rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.more-img {
		width: 46rpx;
		height: 10rpx;
		position: absolute;
		top: 64rpx;
		right: 30rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	.money_list{
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		margin-top:-102rpx;
	}
	.point-choose{
		height:102rpx;
		color:#000;
		font-size:32rpx;
		margin-left:30rpx;
		line-height: 102rpx;
		 // padding-top:40rpx;
	}
	.point-list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-left:30rpx;	
	}
	.point-item{
		height:150rpx;
		width:216rpx;
		border-radius: 16rpx;
		border:1px solid #efefef;
		margin-right:21rpx;
		margin-bottom:30rpx;
	}
	.point-itemed{
		border:1px solid #FEEAA1;
	}
	.item-fen{
		height:77rpx;
		font-size: 40rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
		justify-content: center;
		background: #efefef;
		border-radius: 16rpx 16rpx 0 0;
		color:#FD9C1F;
		image{
			width:40rpx;
			height:40rpx;
			margin-right:8rpx;
		}
	}
	.item-fened{
		background: #FEEAA1;
		
	}
	.item-jine{
		height:73rpx;
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		line-height: 73rpx;
	}
	.recharge{
		margin:0 30rpx;
		.rechtitle{
			font-size:32rpx;
		}
	.rechargeMoney{
		display: flex;
		align-items: center;
		margin-top:30rpx;
	}
		.uni-input{
			border-bottom:1px solid #ccc;
			width:100%;
			font-size:48rpx;
			padding-left:18rpx;
		}
	
	}
	
	.recharge-msg{
		width: 690rpx;
		height: 226rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		margin:24rpx auto;
		.msg-title{
			font-size: 28rpx;
			color: #333333;
			padding:24rpx;
		}
		.msg-item{
			font-size: 24rpx;
			color: #666;
			padding-left:24rpx;
			line-height: 38rpx;
		}
	}
	.point-error{
		text-align: center;
		font-size: 24rpx;
		color: #FF0000;
		margin-top:60rpx ;
	
	}
	.submitRecharge{
		width:690rpx;
		height:90rpx;
		margin:30rpx auto;
		background: #000;
		line-height: 90rpx;
	  font-size: 32rpx;
	  color: #FEC92F;
		text-align: center;
		border-radius: 49rpx;
	}
	.kefu{
		width:80rpx;
		height:80rpx;
		position: fixed;
		bottom:126rpx;
		right:30rpx;
	}
	
	
</style>